import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Tag, Tooltip, Button, notification } from 'antd';
import {  } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import GatherEdit from './components/GatherEdit';
import ShowList from './components/ShowList'
import CodeModel from './components/CodeModel';
import moment from 'moment';
import { uploadFile } from '@/utils/utils';
const Gather = (props) => {
  const { loading, dispatch, list, history } = props;
  const childRef = useRef();
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const [visible, setVisible] = useState(false);
  const [showList, setListVisible] = useState(false)
  const [modelVisible, setModelVisible] = useState(false)
  const [params, setParams] = useState({})
  const copyList = e => {
    const textToCopy = e
    // 创建一个虚拟input元素
    const input = document.createElement('input')
    input.value = textToCopy
    document.body.appendChild(input)
    // 选择输入框的内容
    input.select()
    input.setSelectionRange(0, 99999) // 兼容移动设备
    // 执行复制操作
    document.execCommand('copy')
    // 移除虚拟input元素
    document.body.removeChild(input)
    // 可以显示一条消息或者执行其他操作
    notification.success({
      message: '温馨提示',
      description: `复制成功`,
    })
  }
  const fetchShareInfo = (record, callback) => {
    const { id } = record
    dispatch({
      type: 'liveStreaming/fetchGetShareInfo',
      payload: {
        shareId: id,
        shareType: 'collect',
        organizationId: window.localStorage.getItem(
          'organizationId',
        )
      },
      callback: (e) => {
        const { shareInfo } = e
        const {
          wechatUrl
        } = shareInfo
        copyList(wechatUrl)
      }
    })

  }
  const fetchShareCode = (record) => {
    const { id } = record
    dispatch({
      type: 'liveStreaming/fetchGetShareInfo',
      payload: {
        shareId: id,
        shareType: 'collect',
        subType: 'gather',
        organizationId: window.localStorage.getItem(
          'organizationId',
        )
      },
      callback: async (e) => {
        const { shareInfo } = e
        setModelVisible({
          show: true,
          details: shareInfo
        })
      }
    })

  }
  const extraBtn = [
    {
      text: '新建',
      onClick: () => {
        setVisible({
          show: true,
        });
      },
    },
    {
      text: '导出',
      onClick: () => {
        dispatch({
          type: 'liveStreaming/fakeExportUserInformationCollection',
          payload: {
            ...params
          },
          callback: (e) => {
            const { url } = e
            uploadFile(url)
          }

        })
      },
    },

  ];

  const searchItems = [
    {
      label: '信息采集名称',
      name: 'keyword',
    },
    {
      label: '状态',
      name: 'status',
      type: 'select',
      list: {
        0: '禁用',
        1: '启用'
      }
    },
    {
      label: '有效时间',
      type: 'rangePicker',
      name: 'startTime',
      end: 'endTime',
      hasDate: false
    },
    {
      label: '是否允许分享',
      name: 'shareFlag',
      type: 'select',
      select: {
        0: '不允许',
        1: '允许'
      }
    },
  ];
  const getColumns = [
    {
      title: '信息采集名称',

      dataIndex: 'title',
    },
    {
      title: '是否允许充分',

      dataIndex: 'repeatFlag',
      render: (e) => {
        return ['否', '是'][e];
      },
    },
    {
      title: '是否允许独立采集',
      dataIndex: 'independentFlag',
      render: (e) => {
        return ['否', '是'][e];
      },
    },
    {
      title: '采集份数',
      dataIndex: 'recordAmount',
      render: (e, record) => {
        return <Button onClick={() => { setListVisible({ show: true, detail: record }) }} type='link'>{e}</Button>
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '创建人',
      dataIndex: 'createAdminName',
    },

    {
      title: '是否允许分享',
      dataIndex: 'shareFlag',
      render: (e) => {
        return {
          0: '不允许',
          1: '允许'
        }[e]
      }
    },
    {
      title: '有效时间',
      dataIndex: 'startTime',
      render: (e, record) => {
        const { startTime, endTime } = record
        return startTime + '-' + endTime
      }
    },

    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '查看详情',
          click: () => {
            dispatch({
              type: 'liveStreaming/fetchInformationCollectionDetail',
              payload: { id: val },
              callback: (e) => {
                const { content, startTime, endTime } = e;
                setVisible({
                  show: true,
                  detail: {
                    ...e,
                    content: content ? JSON.parse(content) : [],
                    startTime: [startTime ? moment(startTime, 'YYYY-MM-DD') : '', endTime ? moment(endTime, 'YYYY-MM-DD') : ''],
                  },
                });
              },
            });
          },
        },
        {
          title: '复制链接',
          visible: record.independentFlag === '1',
          click: () => {
            fetchShareInfo(record)
          },
        },
        {
          title: '分享二维码',
          visible: record.independentFlag === '1',
          click: () => {
            fetchShareCode(record)
          },
        },
        {
          title: '启用',
          visible: record.status === '0',
          click: () => {
            dispatch({
              type: 'liveStreaming/fakeEnableInformation',
              payload: { id: val },
              callback: () => {
                handleCallback();
              },
            });
          },
        },
        {
          title: '禁用',
          visible: record.status === '1',
          click: () => {
            dispatch({
              type: 'liveStreaming/fakeDisableInformation',
              payload: { id: val },
              callback: () => {
                handleCallback();
              },
            });
          },
        },
        {
          type: 'del',
          click: () => {
            dispatch({
              type: 'liveStreaming/fakeDeleteInformationCollection',
              payload: { id: val },
              callback: () => {
                handleCallback();
              },
            });
          },
        },
      ],
    },
  ];
  if (showList) {
    return <ShowList visible={showList} onClose={() => setListVisible(false)}></ShowList>
  }
  return (
    <>
      <TableDataBlock
        cardProps={{ title: '信息采集' }}
        btnExtra={extraBtn}
        cRef={childRef}
        loading={loading}
        searchCallback={(e) => { setParams(e) }}
        searchItems={searchItems}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="liveStreaming/fetchInformationCollection"
        {...list}
      ></TableDataBlock>
      <GatherEdit handleCallback={handleCallback} visible={visible} onClose={() => setVisible(false)}></GatherEdit>
      <CodeModel visible={modelVisible} onClose={() => setModelVisible(false)}></CodeModel>
    </>
  );
};

export default connect(({ liveStreaming, loading }) => ({
  list: liveStreaming.informationCollectionList,
  loading: loading.models.liveStreaming,
}))(Gather);
